<!-- 首页国内外报名 -->
、
<template>
  <view class="alliance-container">
    <!-- 顶部标题栏 -->
    <view class="alliance-header">
      <text class="header-title">{{ title }}详情</text>
      <view
        class="header-tag"
        :class="title.includes('国内') ? 'tag-domestic' : 'tag-overseas'"
      >
        {{ title.includes("国内") ? "国内抱团" : "海外抱团" }}
      </view>
    </view>

    <!-- 核心信息卡片 -->
    <view
      class="core-card"
      :class="title.includes('国内') ? 'card-domestic' : 'card-overseas'"
    >
      <view class="core-item">
        <view class="item-label">参与企业</view>
        <view class="item-value">
          每个品类最多3个厂家，合作单位拟定{{
            title.includes("国内") ? "130" : "200"
          }}家
        </view>
      </view>
      <view class="core-item">
        <view class="item-label">合作内容</view>
        <view class="item-value">
          <view class="value-tag" v-for="(item, idx) in Content" :key="idx">
            {{ item }}
          </view>
        </view>
      </view>
      <view class="core-item">
        <view class="item-label">费用</view>
        <view class="item-value">
          <text class="fee-number">{{
            title.includes("国内") ? "10" : "45"
          }}</text>
          万元/每年，所有资金大家共同监管，没有管理费，没有中间商赚差价
        </view>
      </view>
    </view>

    <!-- 合作内容详情模块 -->
    <view
      class="detail-section"
      v-for="(section, secIdx) in detailSections"
      :key="secIdx"
    >
      <!-- 模块标题 -->
      <view class="section-header">
        <view
          class="header-line"
          :class="title.includes('国内') ? 'line-domestic' : 'line-overseas'"
        ></view>
        <text class="header-text">{{ section.title }}</text>
      </view>

      <!-- 模块内容 -->
      <view class="section-content">
        <view
          class="content-item"
          v-for="(item, idx) in section.items"
          :key="idx"
        >
          <view
            class="item-num"
            :class="title.includes('国内') ? 'num-domestic' : 'num-overseas'"
          >
            {{ idx + 1 }}
          </view>
          <view class="item-content">
            <text class="content-title">{{ item.title }}：</text>
            <text class="content-desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态（保留原逻辑） -->
    <view class="empty-container" v-if="!title">
      <u-empty
        mode="data"
        :text="`暂无${title}数据`"
        marginTop="100%"
        :icon="getResource('img/phone/mini/no_data.png')"
      />
    </view>
    <view style="margin-bottom: 40px">
      <view
        @click="apply"
        style="
          display: flex;
          padding: 10px 20px;
          background-color: #007aff;
          color: white;
          border-radius: 5px;
          text-align: center;
          font-size: 16px;
          cursor: pointer;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          transition: background-color 0.3s;
          width: 35%;
          margin: 10px auto;
          justify-content: center;
        "
      >
        立刻报名
      </view>
    </view>
    <u-popup
      :show="popupShow"
      @close="popupShow = false"
      mode="center"
      :round="10"
      :safeAreaInsetBottom="false"
    >
      <view class="form-wrapper">
        <u--form
          :model="form"
          ref="dataForm"
          labelPosition="left"
          :rules="dynamicRules"
          labelWidth="200rpx"
          :labelStyle="{ color: '#333', fontWeight: '500', fontSize: '28rpx' }"
        >
          <view class="form-section">
            <u-form-item prop="realname" :borderBottom="false">
              <view class="xingX">
                <text class="xing">*</text>
                <text>姓名</text>
              </view>
              <u--input
                v-model="form.realname"
                placeholder="请输入姓名"
                placeholderStyle="color: #999;"
                :customStyle="{ fontSize: '28rpx' }"
                :disabled="userinfo.company_status == 3"
              />
            </u-form-item>
            <u-form-item prop="mobile" :borderBottom="false">
              <view class="xingX">
                <text class="xing">*</text>
                <text>手机号</text>
              </view>
              <u--input
                v-model="form.mobile"
                placeholder="请输入手机号"
                placeholderStyle="color: #999;"
                :customStyle="{ fontSize: '28rpx' }"
                :disabled="userinfo.company_status == 3"
              />
            </u-form-item>
            <view
              @click="queDing"
              style="
                display: flex;
                padding: 10px 20px;
                background-color: #007aff;
                color: white;
                border-radius: 5px;
                text-align: center;
                font-size: 16px;
                cursor: pointer;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                transition: background-color 0.3s;
                width: 35%;
                margin: 20px auto 0px;
                justify-content: center;
              "
            >
              报名
            </view>
          </view>
        </u--form>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref, toRefs, reactive, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { AgentBaoMing } from "@/api/userInfo";
import { getResource } from "@/utils/Resource";
import { showModal } from "@/utils/toast";
const state = reactive({
  title: "",
  popupShow: false,
  form: { wechat_user_id: "", realname: "", mobile: "", type: "" },
  userinfo: {},
});
const { title, popupShow, form, userinfo } = toRefs(state);

// 计算合作内容（根据国内/海外动态生成）
const Content = computed(() => {
  return title.value.includes("国内")
    ? ["联合参展", "联合省区销售经理", "内部业务资源协作"]
    : ["联合参展", "联合驻外业务团队", "内部业务资源协作"];
});

// 详情模块数据（根据国内/海外动态生成）
const detailSections = computed(() => {
  const isDomestic = title.value.includes("国内");
  return [
    {
      title: "联合参展",
      items: [
        {
          title: "参展数量",
          desc: `参加${isDomestic ? "国内20场" : "海外50场"}左右展会`,
        },
        {
          title: "展位面积",
          desc: "100平米左右特装展位",
        },
        {
          title: "展品展示",
          desc: "参与企业的产品以实物加模型组合搭配，呈现立体直观的应用场景",
        },
        {
          title: "宣传资料",
          desc: `制作《中国电力产业协作体${
            isDomestic ? "" : "（全球版）"
          }》画册，每个参与企业有一个对开彩色宣传`,
        },
        {
          title: "企业收益",
          desc: `实时获得所有展会收集的专业观众相关信息；透过《中国电力产业协作体${
            isDomestic ? "" : "（全球版）"
          }》画册将企业信息传播到${
            isDomestic ? "全国数以万计" : "全球数以十万计"
          }的目标客户；可自行派人参加各个展会拓展客户`,
        },
      ],
    },
    {
      title: isDomestic ? "联合省区销售经理" : "联合组建12个海外业务团队",
      items: [
        {
          title: "人员配置",
          desc: isDomestic
            ? "30名省区经理，覆盖全国所有省市"
            : "每个驻外办公室配备2名中国派驻的业务总监+多名外国当地业务经理",
        },
        {
          title: "工作职能",
          desc: isDomestic
            ? "省区经理在所负责区域内循环拜访目标客户、项目部，了解所在区域各类项目进展情况，了解目标客户施工项目和采购需求，协助合作企业业务落地等"
            : "在中国雇员管理下，由外国雇员通过陌拜、会议、渠道、电销、网销等方式，采集客户信息、拓展客户、整合当地华侨商会资源、收集市场情报、协助合作企业业务落地等",
        },
        {
          title: "企业收益",
          desc: isDomestic
            ? "所有省区经理统一使用CRM客户关系管理系统，参与企业每天可以实时查看30名省区经理每天的工作日志和客户拜访信息、市场情报汇总信息等。参与企业可以根据自身业务需要对有用的客户和信息自行跟进。参与企业在相关区域有业务落地时，也可获得驻外办的各种支持与协助"
            : "所有业务人员统一使用CRM客户关系管理系统，参与企业每天可以实时查看12个驻外办约100名业务人员每天的工作日志和客户拜访信息、市场情报汇总信息等。参与企业可以根据自身业务需要对有用的客户和信息自行跟进。参与企业在国外有业务落地时，也可获得驻外办的各种支持与协助",
        },
      ],
    },
  ];
});
const apply = async () => {
  popupShow.value = true;
  userinfo.value = await uni.getStorageSync("userinfo");
  console.log(userinfo.value);
  form.value.wechat_user_id = userinfo.value.id;
  form.value.realname = userinfo.value.name;
  form.value.mobile = userinfo.value.phone;
};
const queDing = async () => {
  const res = await AgentBaoMing(form.value);
  if (res.code == 10000) {
    showModal(
      {
        title: "系统消息",
        content: "您已完成报名",
        showCancel: false, // 隐藏取消按钮
      },
      (result) => {
        if (result.error) {
          uni.showToast({ title: "通知显示失败", icon: "none" });
          return;
        }
      }
    );
  }
};
// 页面加载时获取标题
onLoad(async (e) => {
  try {
    form.value.type = e.id;
    if (e.id == 1) {
      title.value = "国内市场业务拓展联盟";
    } else {
      title.value = "全球市场业务拓展联盟";
    }
  } catch (error) {
    console.error("加载联盟信息失败：", error);
  }
});
</script>

<style lang="scss" scoped>
.xingX {
  width: 200rpx;
  display: flex;
  align-content: center;
}
.xing {
  color: red;
  margin-right: 4rpx;
}
.form-wrapper {
  margin: 10px;
  //background: white;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.form-section {
  margin-bottom: 40rpx;

  &:last-child {
    margin-bottom: 0;
  }
}
/* 全局容器 */
.alliance-container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding: 20rpx 24rpx;
  box-sizing: border-box;
}

/* 顶部标题栏 */
.alliance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}
.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}
.header-tag {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
}
.tag-domestic {
  background-color: #e6f4ea;
  color: #2e7d32;
}
.tag-overseas {
  background-color: #e3f2fd;
  color: #1976d2;
}

/* 核心信息卡片 */
.core-card {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 30rpx 24rpx;
  margin-bottom: 36rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}
.card-domestic {
  border-left: 8rpx solid #4caf50;
}
.card-overseas {
  border-left: 8rpx solid #2196f3;
}
.core-item {
  display: flex;
  margin-bottom: 28rpx;
  align-items: flex-start;
}
.core-item:last-child {
  margin-bottom: 0;
}
.item-label {
  width: 160rpx;
  font-size: 26rpx;
  font-weight: 500;
  color: #666;
}
.item-value {
  flex: 1;
  font-size: 26rpx;
  color: #333;
  line-height: 42rpx;
}
.value-tag {
  display: inline-block;
  padding: 4rpx 16rpx;
  background-color: #f0f0f0;
  border-radius: 12rpx;
  margin-right: 16rpx;
  margin-bottom: 12rpx;
  font-size: 24rpx;
}
.fee-number {
  font-size: 32rpx;
  font-weight: 600;
  color: #e53935;
  margin-right: 8rpx;
}

/* 详情模块 */
.detail-section {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 30rpx 24rpx;
  margin-bottom: 36rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 28rpx;
}
.header-line {
  width: 8rpx;
  height: 32rpx;
  border-radius: 4rpx;
  margin-right: 16rpx;
}
.line-domestic {
  background-color: #4caf50;
}
.line-overseas {
  background-color: #2196f3;
}
.header-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

/* 模块内容项 */
.section-content {
  padding-left: 24rpx;
}
.content-item {
  display: flex;
  margin-bottom: 32rpx;
  align-items: flex-start;
}
.content-item:last-child {
  margin-bottom: 0;
}
.item-num {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  font-weight: 600;
  color: #fff;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.num-domestic {
  background-color: #4caf50;
}
.num-overseas {
  background-color: #2196f3;
}
.item-content {
  flex: 1;
  font-size: 24rpx;
  color: #333;
  line-height: 40rpx;
}
.content-title {
  font-weight: 500;
  margin-right: 8rpx;
}

/* 空状态容器 */
.empty-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
